<template>
  <div
    class="search-content"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }"
  >
    <!-- <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" /> -->
    <Search
      ref="topSearch"
      class="search"
      placeholder="任务编号|设备编号|设备名称"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    ></Search>
    <div class="formgroup">
      <span class="title">任务编号</span>
      <van-field v-model="params.taskCode" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">方案名称</span>
      <van-field v-model="params.programName" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">设备类别</span>
      <van-field-checkbox
        :supportClear="true"
        placeholder="请选择"
        v-model="selectedCategory"
        :columns="typeOptions"
        :option="{ label: 'text', value: 'value' }"
      />
      <div class="bottomLine"></div>
      <span class="title">设备编号</span>
      <van-field v-model="params.deviceCode" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">设备名称</span>
      <van-field v-model="params.deviceName" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">汇报人</span>
      <van-field
        :is-link="!createdByName"
        readonly
        name="picker"
        v-model="createdByName"
        @click="ddthrVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!createdByName"
          @click.stop="confirmDdtjr('', '', true)"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            style="width:0.16rem"
          />
        </div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">状态</span>
      <van-field
        :is-link="!params.taskStatusText"
        readonly
        name="picker"
        v-model="params.taskStatusText"
        @click="statusVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!params.taskStatusText"
          @click.stop="stCancel"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            style="width: 0.16rem"
          />
        </div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">汇报时间</span>
      <van-field
        :is-link="!reportDateRead"
        readonly
        name="picker"
        @click="reportDateStartVisible = true"
        placeholder="请选择"
        v-model="reportDateRead"
      >
        <div
          slot="right-icon"
          v-show="!!reportDateRead"
          @click.stop="cancelReportStartTime"
        >
          <van-icon name="clear" size="0.16rem" />
        </div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">创建时间</span>
      <van-field
        :is-link="!createdTimeRead"
        readonly
        name="picker"
        v-model="createdTimeRead"
        @click="createdTimeBeginVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!createdTimeRead"
          @click.stop="cancelCreatedStartTime"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            style="width:0.16rem"
          />
        </div>
      </van-field>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>

    <!--汇报时间开始时间 -->
    <van-popup
      v-model="reportDateStartVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmReportStartTime"
        @cancel="cancelReportStartTime"
        type="date"
        title="汇报时间开始时间"
        v-model="minDate1"
        :formatter="formatter"
      />
    </van-popup>
    <!--汇报时间结束时间 -->
    <van-popup
      v-model="reportDateEndVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmReportEndTime"
        @cancel="cancelReportEndTime"
        type="date"
        title="汇报时间结束时间"
        :min-date="promiseEndMinDate"
        :formatter="formatter"
      />
    </van-popup>

    <!--订单提交开始时间 -->
    <van-popup
      v-model="createdTimeBeginVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmCreatedStartTime"
        @cancel="cancelCreatedStartTime"
        type="date"
        title="创建时间开始时间"
        v-model="minDate1"
        :formatter="formatter"
      />
    </van-popup>
    <!--订单提交结束时间 -->
    <van-popup
      v-model="createdTimeEndVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmCreatedEndTime"
        @cancel="cancelCreatedEndTime"
        type="date"
        title="创建时间结束时间"
        :min-date="createEndMinDate"
        :formatter="formatter"
      />
    </van-popup>
    <contact-pickers
      :visible="ddthrVisible"
      :max="5"
      @closePicker="ddthrVisible = false"
      @confirm="confirmDdtjr"
    >
    </contact-pickers>
    <van-popup v-model="typeVisible" position="bottom">
      <van-picker
        :columns="typeOptions"
        @confirm="typeConfirm"
        @cancel="typeVisible = false"
        show-toolbar
      />
    </van-popup>
    <van-popup v-model="statusVisible" position="bottom">
      <van-picker
        :columns="statusOptions"
        @confirm="statusConfirm"
        @cancel="statusVisible = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
const formP = {
  taskCode: "",
  programName: "",
  deviceCategoryText: "",
  deviceCategory: "",
  deviceName: "",
  deviceCode: "",
  taskStatusText: "",
  taskStatus: "",
  reporter: "",
  reportDateStart: "",
  reportDateEnd: "",
  createDateStart: "",
  createDateEnd: "",
};
import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import moment from "moment";
import Search from "@/components/search";
import VanFieldCheckbox from "@/components/ActionSheet/VanFieldCheckbox";
export default {
  name: "search",
  components: { Navbar, ContactPickers, Search, VanFieldCheckbox },
  data() {
    return {
      title: this.$route.meta.title,
      ddthrVisible: false,
      reportDateStartVisible: false,
      reportDateEndVisible: false,
      createdTimeBeginVisible: false,
      createdTimeEndVisible: false,
      typeVisible: false,
      fzrName: "", //生产负责人
      createdByName: "", //订单提交人
      rtitle: "",
      rname: "", //search
      minDate1: new Date(),
      minDate2: new Date(),
      createEndMinDate: new Date(2020, 1, 1),
      promiseEndMinDate: new Date(2020, 1, 1),
      maxDate: new Date(2025, 10, 1),
      params: Object.assign({}, formP),
      createdTimeRead: "",
      reportDateRead: "",
      typeOptions: [],
      statusOptions: [],
      delType: false,
      statusVisible: false,
      selectedCategory: [],
    };
  },
  props: {
    propsForSon: {
      type: Object,
      default: {},
    },
  },
  watch: {
    propsForSon(newVal) {
      console.log(newVal, "newValnewVal");
      this.$refs.topSearch.value = newVal.keyword;
      this.params = newVal;
      this.selectedCategory = newVal.deviceCategory
        ? newVal.deviceCategory.split(",")
        : [];
    },
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    isCancel() {
      this.params.deviceCategoryText = "";
      this.params.deviceCategory = "";
      this.delType = !this.delType;
    },
    stCancel() {
      this.params.taskStatus = "";
      this.params.taskStatusText = "";
      this.delType = !this.delType;
    },
    typeConfirm(v) {
      if (!v) {
        this.typeVisible = false;
        return;
      }
      this.params.deviceCategoryText = v.text;
      this.params.deviceCategory = v.value;
      this.typeVisible = false;
    },
    statusConfirm(v) {
      if (!v) {
        this.statusVisible = false;
        return;
      }
      this.params.taskStatusText = v.text;
      this.params.taskStatus = v.value;
      this.statusVisible = false;
    },
    fileChange(ids) {
      console.log("父组件" + ids);
    },
    // 选择汇报时间开始时间
    confirmReportStartTime(date) {
      this.promiseEndMinDate = date;
      this.params.reportDateStart = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.params.reportDateEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.reportDateStartVisible = false;
      this.reportDateEndVisible = true;
      this.reportDateRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消汇报时间开始时间
    cancelReportStartTime() {
      this.params.reportDateStart = "";
      this.params.reportDateEnd = "";
      this.reportDateRead = "";
      this.reportDateStartVisible = false;
    },
    // 选择汇报时间结束时间
    confirmReportEndTime(date) {
      this.params.reportDateEnd = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.reportDateRead =
        this.reportDateRead + "~" + moment(date).format("YYYY-MM-DD");
      this.reportDateEndVisible = false;
    },
    // 取消汇报时间结束时间
    cancelReportEndTime() {
      this.params.reportDateStart = "";
      this.params.reportDateEnd = "";
      this.reportDateRead = "";
      this.reportDateEndVisible = false;
    },
    // 选择订单提交开始时间
    confirmCreatedStartTime(date) {
      this.createEndMinDate = date;
      this.params.createDateStart = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.params.createDateEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.createdTimeBeginVisible = false;
      this.createdTimeEndVisible = true;
      this.createdTimeRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消订单提交开始时间
    cancelCreatedStartTime() {
      this.params.createDateStart = "";
      this.params.createDateEnd = "";
      this.createdTimeRead = "";
      this.createdTimeBeginVisible = false;
    },
    // 选择订单提交结束时间
    confirmCreatedEndTime(date) {
      this.params.createDateEnd = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.createdTimeRead =
        this.createdTimeRead + "~" + moment(date).format("YYYY-MM-DD");
      this.createdTimeEndVisible = false;
    },
    // 取消订单提交结束时间
    cancelCreatedEndTime() {
      this.params.createDateStart = "";
      this.params.createDateEnd = "";
      this.createdTimeRead = "";
      this.createdTimeEndVisible = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    confirmDdtjr(val, selectedList, judge) {
      this.params.reporter = "";
      this.createdByName = "";
      if (judge) {
        this.ddthrVisible = false;
        return;
      }
      this.params.reporter = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName = arr.join(",");
      this.ddthrVisible = false;
    },
    cancel() {
      this.createdByName = "";
      this.createdTimeRead = "";
      this.reportDateRead = "";
      this.$refs.topSearch.value = "";
      this.minDate1 = new Date();
      this.minDate2 = new Date();
      this.params = Object.assign({}, formP);
      this.params.taskStatusText = "待保养";
      this.params.taskStatus = "0";
      this.selectedCategory = [];
      // this.$emit("resetCategory");
    },
    confirm() {
      var keyword = this.$refs.topSearch.value;
      this.params.deviceCategory = this.selectedCategory.join(",");
      this.$emit("getCategory", this.params, keyword);
    },
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    height: calc(100vh - 1.11rem);
    padding-bottom: 0.53rem;
    overflow-y: scroll;
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    font-size: 0.16rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      color: #fff;
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      color: #191f25;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem 0.14rem;
}
</style>
